<template>
  <div class="about">
    <div class="component-count">
      <Count />
    </div>
    <div class="component-love-talk">
      <LoveTalk />
    </div>
  </div>
</template>

<script setup lang="ts" name="About">
  import { onMounted, onUnmounted } from 'vue'
  import LoveTalk from '@/components/LoveTalk.vue'
  import Count from '@/components/Count.vue'

</script>

<style scoped>
  .about {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    flex-direction: row; /* 横向排列组件 */
    background-color: #f0f0f0; /* 背景颜色 */
    height: auto;
    padding: 20px;
    margin: 0;
  }

  .component-count {
    margin: 20px 0; /* 组件之间的间距 */
    width: 400px;
  }
  .component-love-talk {
    margin: 20px 0; /* 组件之间的间距 */
    width: 600px;
    height: 280px;
  }
</style>
